
//店铺授权之前购买服务确认


import React, { useEffect } from "react";
import CommonModal from '@/components/CommonModal';
import { Button, Form, Radio } from 'antd';


export default ({ visible, id, handleOk, handleCancel }) => {

  const [ form ] = Form.useForm();

  useEffect(() => {
    if(visible) {
      form.resetFields();
    }
  }, [ visible ])

  //跳转到应用购买页面
  const handleBuyService = () => {
    const pathArr = [
      { id: '1', src: 'https://fuwu.taobao.com/ser/detail.htm?service_code=FW_GOODS-1000239806&code=FW_GOODS-1000239806' },
      { id: '3', src: 'https://fw.jd.com/main/detail/FW_GOODS-258815' },
      { id: '4', src: 'https://mms.pinduoduo.com/login/sso?platform=fuwu&redirectUrl=https://fuwu.pinduoduo.com/clint/api/login?redirect=https://fuwu.pinduoduo.com/service-market/service-detail?detailId=4355' },
      { id: '5', src: 'https://pc.1688.com/product/detail.htm?spm=0.0.0.0.DmsEFH&productCode=Zl%2FvMD0HQ%2FLTkZEflqusr%2Bc8EYpmLYzB5zze9GGLPN4%3D&productType=GROUP' },
    ]
    const path = pathArr.filter(v => v.id == id)[0].src;
    window.open(path);
  }

  const handleClick = () => {
    form.validateFields().then(val => {
      handleOk(val);
    }).catch((err) => {
      console.log(err, 'err');
    })
  }

  return (
    <CommonModal
      title='应用服务购买确认'
      visible={visible}
      width='500px'
      onCancel={handleCancel}
      footer={[
        <Button key='save' onClick={handleBuyService}>我未订购，去购买应用</Button>,
        <Button key='ok' onClick={handleClick} type='primary'>我已订购，开始授权</Button>
      ]}
    >
      <div style={{ padding:  '24px' }}>
        <p>店铺授权前请先在服务市场购买应用服务，购买成功后才能授权店铺</p>
        <Form 
            name='shop-authorize'
            className='search-form-style'
            form={form}
            initialValues={{
              spdFlag: 1,
            }}
          >
            <Form.Item 
              name="spdFlag"
              label="同步订单去往"
              rules={[
                { required: true, message: '同步订单去往未设置' },
              ]}
            >
              <Radio.Group>
                <Radio value={1}>
                  订单处理页面（自发、代发业务）
                </Radio>
                {/* <Radio value={3}>
                  自发打印页面
                </Radio> */}
              </Radio.Group>
            </Form.Item>
          </Form>
        {/* <p className='color5'>注：授权店铺成功后，平台同步的订单会去往订单处理页面或自发打印页面，两者必须取其一，请谨慎选择自己所需的业务；如需修改可在店铺设置里修改选项，但是之前同步过的订单不能再修改</p> */}
      </div>
    </CommonModal>
  );
};